<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东登录页</title>
    <style>
		*{padding:0;margin:0;}
		a{text-decoration:none;color:#666;}
		a:hover{text-decoration:underline;color:#b61d1d;}
		body,html{font:12px/1.5 "微软雅黑",Arial;color:#666;}
		.wrap{width:990px;margin:0 auto;}
		.left{float:left;}
		.right{float:right;}
		
		.logo-box{
			height:60px;
			padding-top:10px;
		}
		.logo-r{
			font-size:24px;
			padding-left:20px;
			margin-top:10px;
		}
		
		.content{
			background:#e93854;
			margin-top:15px;
		}
		.login-box{
			height:475px;
			background:url(banner.png) no-repeat left top;
		}
		.login-form{
			float:right;
			margin-top:40px;
			width:306px;
			padding:20px;
			background:#fff;
		}
		.login-form h2{
			font-weight:normal;
			font-size:20px;
			height:27px;
			margin-bottom:25px;
		}
		.login-form h2 a{
			font-size:14px;
			color:#b61d1d;
			padding-left:21px;
			line-height:29px;
			float:right;
			background:url(icon5.jpg) 0 center no-repeat ;
		}
		.login-form .item{
			height:38px;
			margin-bottom:20px;
			border:1px #bdbdbd solid;
		}
		.item input{
			float:left;
			border:0 none;
			padding:10px 0 10px 10px;
			font-size:14px;
			line-height:18px;
			width:255px;
			color:#999;
		}
		.item label{
			border-right:1px #bdbdbd solid;
			width:38px;
			height:38px;
		}
		.item .nick{
			background:url(icon1.jpg) no-repeat;
		}
		
		.item .psw{
			background:url(icon2.jpg) no-repeat;
		}
		.item2{
			font-size:0;
			margin-bottom:15px;
		}
		.item2 label{
			font-size:12px;
			vertical-align:middle;
		}
		.item2 input{
			vertical-align:middle;
			margin-right:3px;
		}
		.item2 a{
			float:right;
			font-size:12px;
		}
		.login-btn{
			display:block;
			height:35px;
			line-height:35px;
			text-align:center;
			color:#fff;
			background:#e4393c;
			font-size:18px;
		}
		.login-btn:hover{
			color:#fff;
			text-decoration:none;
		}
		.footer{
			text-align:center;
			margin-top:20px;
			padding-bottom:30px;
		}
		.link a{
			margin:0 10px;
		}
		.copy{
			margin-top:8px;
		}
	</style>
</head>
<body>
<header class="wrap">
    <div class="logo-box">
        <h1 class="left">
            <a href="" ><img src="logo.png" alt="LOGO"/></a>
        </h1>
        <span class="left logo-r">欢迎登录</span>
    </div>
</header>

<article class="content">
    <div class="wrap">
        <div class="login-box">
            <div class="login-form">
                <h2>京东会员<a href="">立即注册</a></h2>
                <form action="" method="post" id="loginForm">
                    <div class="item">
                        <label class="nick left"></label>
                        <input type="text" name="nick" placeholder="邮箱/用户名/已验证手机"/>
                    </div>
                    <div class="item">
                        <label class="psw left"></label>
                        <input type="password" name="psw"/>
                    </div>
                    <div class="item2">
                        <input type="checkbox" name="auto" id="auto"/>
                        <label for="auto">自动登录</label>
                        <a href="">忘记密码?</a>
                    </div>
                    <a href="" class="login-btn">登 录</a>
                </form>
            </div>
        </div>
    </div>
</article>
<footer class="wrap footer">
    <div class="link">
        <a href="">关于我们</a>|
        <a href="">联系我们</a>|
        <a href="">人才招聘</a>|
        <a href="">商家入驻</a>|
        <a href="">广告服务</a>|
        <a href="">手机京东</a>|
        <a href="">友情链接</a>|
        <a href="">销售联盟</a>|
        <a href="">京东社区</a>|
        <a href="">京东公益</a>|
        <a href="">English Site</a>
    </div>
    <div class="copy">Copyright2004-2017 京东JD.com 版权所有</div>
</footer>
</body>
</html>